import React, { Component } from 'react';
import { connect } from 'dva';
import Ellipsis from '@/components/Ellipsis';
import { maxLength } from '@/utils/form';
import { REGION_ADDRESS_TYPE, REGION_TYPE, SERVICE_STATUS } from '@/Constants';
import { NAME_RULE, CODE_RULE } from '@/Constants/rules';
import {
  Menu,
  Dropdown,
  Button,
  Icon,
  message,
  Card,
  Form,
  Modal,
  Input,
  Tree,
  Transfer,
  Switch,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import MyIcon from '@/components/MyIcon';
import { trim, treeIcon } from '@/utils/utils';
import styles from './OrgTree.less';

const FormItem = Form.Item;
const { TreeNode } = Tree;

@connect(({ usergroups, org }) => ({
  sysRoots: usergroups.sysRoots,
  userGroupsMenuList: usergroups.userGroupsMenuList,
  orgUsers: org.orgUsers,
}))
@Form.create()
class OrgTree extends Component {
  state = {
    expandedKeys: [],
    autoExpandParent: true,
  };

  componentDidMount(nextProps) {
    const { orgTree } = this.props;
    orgTree &&
      this.setState({
        expandedKeys: this.getAllTreeNodeKeys(orgTree),
      });
  }

  componentWillReceiveProps(nextProps) {
    const { orgTree } = nextProps;
    if (this.props.orgTree !== orgTree) {
      orgTree &&
        this.setState({
          expandedKeys: this.getAllTreeNodeKeys(orgTree),
        });
    }
  }

  getAllTreeNodeKeys = (treeData = []) => {
    let keys = [];
    function loop(treeData) {
      treeData.forEach(node => {
        keys.push(node.id);
        node.children && loop(node.children);
      });
    }

    loop(treeData);
    return keys;
  };

  fetchOrgUsers = orgId => {
    return this.props.dispatch({
      type: 'org/fetchOrgUsers',
      payload: {
        pathParams: {
          id: orgId,
        },
      },
    });
  };

  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  onSelect = async (selectedKeys, e) => {
    this.props.onTreeNodeSelect && this.props.onTreeNodeSelect(selectedKeys, e);
  };

  renderNodeTitle = item => {
    const icon = treeIcon(item);
    return (
      <span>
        <MyIcon className={styles.myIcon} type={icon} />
        <span>{item.shortName}</span>
      </span>
    );
  };

  renderTreeNodes = data => {
    return data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={this.renderNodeTitle(item)} key={item.id} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={this.renderNodeTitle(item)} key={item.id} dataRef={item} />;
    });
  };

  renderTree = () => {
    const { orgTree, selectedKeys, checkedKeys, onCheck, checkable, checkStrictly } = this.props;
    return (
      <Tree
        checkStrictly={!!checkStrictly}
        checkable={!!checkable}
        onExpand={this.onExpand}
        expandedKeys={this.state.expandedKeys}
        autoExpandParent={this.state.autoExpandParent}
        onSelect={this.onSelect}
        selectedKeys={selectedKeys}
        checkedKeys={checkedKeys}
        onCheck={onCheck}
      >
        {this.renderTreeNodes(orgTree)}
      </Tree>
    );
  };

  render() {
    return (
      <Card className={styles.tree} bordered={false}>
        {this.renderTree()}
      </Card>
    );
  }
}

export default OrgTree;
